<template>
  <div class="description-content">
    <h3>{{ props.title }}</h3>
    <p class="description">说明：{{ props.info }}</p>
    <p class="description-details" v-for="(item,index) in props.desc" :key="index">{{ item.label }}</p>
    <p class="description">参数：</p>
    <p class="description-details">
      <div v-html='props.param'></div>
    </p>
    <p class="description">使用：</p>
    <p class="description-details">
      <div v-html='props.use'></div>
    </p>
  </div>
</template>
<script lang="ts" setup>
let props = defineProps({
  title: {
    type: String,
    default: ''
  },
  info: {
    type: String,
    default: ''
  },
  desc: {
    type: Array,
    default: () => ([])
  },
  param: {
    type: String,
    default: ''
  },
  use: {
    type: String,
    default: ''
  }
})
</script>
<style>
.description-content h3{
    text-indent: 2em;
}
.description-content .description{
  text-indent: 4em;
  font-weight: bold;
}
.description-content .description-details{
  text-indent:6em
}
.description-content .description-details .active{
  color: #4078f2;
}
</style>